<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    vm里的属性        data属性、computed属性
    vm._data的属性    data属性

    计算属性：
      1.定义：实际是不存在的，要通过依赖的属性计算得出
      2.原理：底层借用了 Object.defineproperty() 方法提供的 getter 和 setter
      3.get 函数什么时候触发？
        （1）第一次读取会执行一次
        （2）它依赖的数据发生改变时会被再次调用
      4.与 methods 相比，计算属性内部有缓存机制（复用），效率更高，调试方便。
      5.备注：
        （1）计算属性最终会在 vm 上，直接读取即可
        （2）如果计算属性要修改，要给这个属性写set函数，且里面修改：它依赖的数据（不是直接改这个计算属性的值）
    -->
    <div id="root">
      <!-- 
        v-model:value  v-model
         -->
      姓：<input type="text" v-model:value="lastName" /><br />
      名：<input type="text" v-model="firstName" /><br />
      姓名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          // vm和vm._data里都有
          lastName: "张",
          firstName: "三",
        },
        // 计算属性有缓存，比如fullName被使用3次，但是数据都没变，get只调用一次
        // 如果换成methods，每次使用都要调用一次函数
        computed: {
          // vm里有这个属性，但是_data里没有
          fullName: {
            // 当有人读取fullName属性时，get就会被调用。返回值就是fullName的值
            // ！！！重要get什么时候调用：1.除此读取fullName 2.所依赖的数据发生变化时
            get() {
              // this._data.lastName  也可以拿到data属性
              return this.lastName + this.firstName;
            },
            set(value) {
              // 要修改计算属性，其实就是改它依赖的属性
              const arr = value.split("");
              this.lastName = arr[0];
              this.firstName = arr[1];
            },
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
